<template>
  <div class="main" style="overflow-y: auto;height: 100vh">
    <el-card class="box-card">
      <div style="display: flex; justify-content: space-between;align-items: center;margin-bottom: 20px;">
        <div style="font-size: 20px;font-weight: bold;margin: 0px 10px;">值班日记</div>
        <div>
          <el-button type="success" @click="submitDutyRecordInfo">保 存</el-button>
<!--          <el-button @click="cancel">取 消</el-button>-->
        </div>
      </div>
      <div style="padding-left:100px">
        <el-form ref="registerForm" :model="zbForm" :rules="zbRules" class="register-form">
          <el-row>
            <el-col :span="8">
              <el-form-item prop="name" label="值班领导" label-width="80px">
                <el-input v-model="zbForm.zbld" type="text" auto-complete="off" placeholder="请输入值班领导姓名">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="指挥长" label-width="80px">
                <el-input v-model="zbForm.zhz" type="text" auto-complete="off" placeholder="请输入指挥长姓名">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="指挥中心" label-width="80px">
                <el-input v-model="zbForm.zhzx" type="text" auto-complete="off" placeholder="请输入指挥中心姓名">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item prop="name" label="通信助理" label-width="80px">
                <el-input v-model="zbForm.txzl" type="text" auto-complete="off" placeholder="请输入通信助理姓名">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="作战助理" label-width="80px">
                <el-input v-model="zbForm.zzzl" type="text" auto-complete="off" placeholder="请输入作战助理姓名">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="信息助理" label-width="80px">
                <el-input v-model="zbForm.xxzl" type="text" auto-complete="off" placeholder="请输入信息助理姓名">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item prop="name" label="政宣助理" label-width="80px">
                <el-input v-model="zbForm.zxzl" type="text" auto-complete="off" placeholder="请输入政宣助理姓名">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="战保助理" label-width="80px">
                <el-input v-model="zbForm.zbzl" type="text" auto-complete="off" placeholder="请输入战保助理姓名">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="name" label="值班时间" label-width="80px">
                <el-date-picker
                  v-model="zbForm.zbtime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  placeholder="选择值班日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="name" label="工作记录" label-width="80px">
<!--                <el-input v-model="zbForm.zbrecord"
                          type="textarea"
                          :rows="8"
                          :input-style="{ lineHeight: '3.6' }"
                          placeholder="请输入值班工作记录">
                </el-input>-->
                <Editor v-model="zbForm.zbrecord" :is-clear="isClear" @editorchange="editorchange($event)" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
<!--    <el-card class="box-card" style="margin-top: 20px;">
      <div style="display: flex; justify-content: space-between;align-items: center;margin-bottom: 20px;">
        <div style="font-size: 20px;font-weight: bold;margin: 0px 10px;">舆情监控记录</div>
        <div>
          <el-button type="success" @click="addMonitoringRecordHandle">新 增</el-button>
&lt;!&ndash;          <el-button @click="cancel">取 消</el-button>&ndash;&gt;
        </div>
      </div>

      <el-table v-loading="loading" :data="monitoringRecordList">
        &lt;!&ndash;      <el-table-column label="主键" align="center" prop="id" />&ndash;&gt;
        <el-table-column label="时间" align="center" prop="time" />
        <el-table-column label="网络时间摘要" align="center" prop="eventSummary" />
        <el-table-column label="舆情处置纪要" align="center" prop="disposalMinutes" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleMonitoringUpdate(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleMonitoringDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px;">
      <div style="display: flex; justify-content: space-between;align-items: center;margin-bottom: 20px;">
          <div style="font-size: 20px;font-weight: bold;margin: 0px 10px;">值班调班记录</div>
          <div>
            <el-button type="success" @click="addShiftChangeRecordHandle">新 增</el-button>
&lt;!&ndash;            <el-button @click="cancel">取 消</el-button>&ndash;&gt;
          </div>
      </div>
      <el-table v-loading="loading" :data="shiftChangeRecordList">
        &lt;!&ndash;      <el-table-column label="主键" align="center" prop="id" />&ndash;&gt;
        <el-table-column label="调班日期" align="center" prop="time" />
        <el-table-column label="原值班人员" align="center" prop="originalDutyName" />
        <el-table-column label="更换值班人员" align="center" prop="changeDutyName" />
        <el-table-column label="替班" align="center" prop="tiban" />
        <el-table-column label="调班" align="center" prop="tiaoban" />
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleShiftChangeUpdate(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleShiftChangeDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :title="monitoringRecordTitle" :visible.sync="monitoringRecordOpen" width="800px" append-to-body
               :close-on-click-modal="false" @close="cancelMonitoringRecord">
      <el-form ref="monitoringRecordForm" :model="monitoringRecordForm" :rules="monitoringRecordRules" label-width="100px">
        <el-form-item label="时间" prop="time">
          <el-time-select
            placeholder="起始时间"
            v-model="monitoringRecordForm.time"
            :picker-options="{
                      start: '00:00',
                      step: '00:10',
                      end: '23:50'
           }">
          </el-time-select>
        </el-form-item>
        <el-form-item label="网络时间摘要" prop="eventSummary" label-width="100px">
          <el-input v-model="monitoringRecordForm.eventSummary"
                    type="textarea"
                    :rows="6"
                    :input-style="{ lineHeight: '3' }" placeholder="请输入网络时间摘要" />
        </el-form-item>
        <el-form-item label="舆情处置纪要" prop="disposalMinutes" label-width="100px">
          <el-input v-model="monitoringRecordForm.disposalMinutes"
                    type="textarea"
                    :rows="6"
                    :input-style="{ lineHeight: '3' }" placeholder="请输入舆情处置纪要" />
        </el-form-item>
        <div style="text-align: center;">
          <el-button type="primary" @click="submitMonitoringRecord">确 定</el-button>
          <el-button @click="cancelMonitoringRecord">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog :title="shiftChangeRecordTitle" :visible.sync="shiftChangeRecordOpen" width="600px"
               @close="cancelShiftChangeRecord" append-to-body :close-on-click-modal="false">
      <el-form ref="shiftChangeRecordForm" :model="shiftChangeRecordForm" :rules="shiftChangeRecordRules" label-width="100px">
        <el-form-item label="调班日期" prop="time">
          <el-time-select
            style="width: 70%;"
            placeholder="起始时间"
            v-model="shiftChangeRecordForm.time"
            :picker-options="{
                      start: '00:00',
                      step: '00:10',
                      end: '23:50'
           }">
          </el-time-select>
        </el-form-item>
        <el-form-item label="原值班人员" prop="originalDutyName" label-width="100px">
          <el-input v-model="shiftChangeRecordForm.originalDutyName"
                    type="text" style="width: 70%"
                    placeholder="请输入更换值班人员姓名" />
        </el-form-item>
        <el-form-item label="更换值班人员" prop="changeDutyName" label-width="100px">
          <el-input v-model="shiftChangeRecordForm.changeDutyName"
                    type="text" style="width: 70%"
                    placeholder="请输入原值班人员姓名" />
        </el-form-item>

        <el-form-item label="替班" prop="tiban" label-width="100px">
          <el-input v-model="shiftChangeRecordForm.tiban"
                    type="text" style="width: 70%"
                    placeholder="请输入替班" />
        </el-form-item>

        <el-form-item label="调班" prop="tiaoban" label-width="100px">
          <el-input v-model="shiftChangeRecordForm.tiaoban"
                    type="text" style="width: 70%"
                    placeholder="请输入调班" />
        </el-form-item>

        <el-form-item label="备注" prop="remark" label-width="100px">
          <el-input v-model="shiftChangeRecordForm.remark"
                    type="textarea" style="width: 70%"
                    :rows="3"
                    :input-style="{ lineHeight: '3' }" placeholder="请输入备注" />
        </el-form-item>
        <div style="text-align: center;">
          <el-button type="primary" @click="submitShiftChangeRecord">确 定</el-button>
          <el-button @click="cancelShiftChangeRecord">取 消</el-button>
        </div>
      </el-form>

      </el-form>
    </el-dialog>-->
  </div>
</template>
<script>
import Editor from '@/components/editor.vue'
import { dutyRecordInfoAdd , getDutyRecordInfoByCid} from '@/api/dutyRecordInfo'
import { dutyRecordMonitoringAdd ,listRecordMonitoring,getMonitoring,updateDutyRecordMonitoring,delMonitoring } from '@/api/dutyRecordMonitoring'
import { dutyRecordShiftChangeAdd , listRecordShiftChange,getShiftChange,updateDutyRecordShiftChange,delShiftChange } from '@/api/dutyRecordShiftChange'
import { validateNum } from '@/utils/validator'
import { contentApidelete } from '@/api/webpage'
export default {
  name: 'Addform',
  components: {
    Editor,
  },
  data() {
    return {
      isClear: '',
      monitoringRecordForm: {},
      shiftChangeRecordForm: {},
      monitoringRecordTitle: '添加舆情监控记录',
      shiftChangeRecordTitle: '添加值班调班记录',
      monitoringRecordOpen: false,
      shiftChangeRecordOpen: false,
      // 值班人员信息表单
      zbForm: {},
      // 表单校验
      zbRules: {
      },
      // 遮罩层
      loading: false,
      // 舆情监控记录
      monitoringRecordList: [],
      // 值班调班记录
      shiftChangeRecordList:[],
      contentId: '',
      monitoringRecordRules:{
        time: [
          { required: true, message: "时间不能为空", trigger: "blur" }
        ],
      },
      shiftChangeRecordRules:{
        time: [
          { required: true, message: "时间不能为空", trigger: "blur" }
        ],
      },
    }
  },
  created() {
    this.contentId = this.$route.query.id
    // 查询是否存在新闻
    console.log("内容id",this.contentId)
    // 获得新闻内容
    getDutyRecordInfoByCid(this.contentId).then(resp=>{
      console.log("信息是：",resp)
      if(resp.data){
        this.zbForm = resp.data
      }else {
        this.zbForm = {
          id: '',
          txzl:'',
          xxzl:'',
          zbld:'',
          zbrecord:'',
          zbtime:'',
          zbzl:'',
          zhz:'',
          zhzx:'',
          zxzl:'',
          zzzl:'',
          contentId: this.contentId
        }
      }

      console.log("组装的数据是：",this.zbForm)
    })

    /* this.getRecordMonitoringList();
    this.getRecordShiftChangeList(); */
  },
  methods: {
    editorchange(val) {
      this.zbForm.zbrecord = val
    },
    // 获得舆情记录
    getRecordMonitoringList(){
      listRecordMonitoring({contentId: this.contentId }).then(resp=>{
        console.log("舆情记录数据列表是",resp)
        if(resp.data){
          this.monitoringRecordList = resp.data
        }
      })
    },
    // 获得调班记录
    getRecordShiftChangeList() {
      listRecordShiftChange({contentId: this.contentId }).then(resp=>{
        console.log("调班调班列表是",resp)
        if(resp.data){
          this.shiftChangeRecordList = resp.data
        }
      })
    },
    /** 修改舆情记录按钮操作 */
    handleMonitoringUpdate(row) {
      let id = row.id
      getMonitoring(id).then(resp=>{
        this.monitoringRecordForm = resp.data;
        this.monitoringRecordOpen = true
        this.monitoringRecordTitle="修改舆情监控记录"
      })
    },
    handleShiftChangeUpdate(row) {
      let id = row.id
      getShiftChange(id).then(resp=>{
        this.shiftChangeRecordForm = resp.data;
        this.shiftChangeRecordOpen = true
        this.shiftChangeRecordTitle="修改值班调班记录"
      })
    },
    handleMonitoringDelete(row){
      this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        console.log("删除行",row)
        delMonitoring({id : row.id}).then(resp=>{
          this.getRecordMonitoringList();
        })
      })
      .catch(() => { });
    },
    handleShiftChangeDelete(row){
      this.$confirm("此操作将永久删除该行数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        console.log("删除行",row)
        delShiftChange({id : row.id}).then(resp=>{
          this.getRecordShiftChangeList();
        })
      })
      .catch(() => { });
    },
    submitDutyRecordInfo(){
      this.zbForm.contentId = this.contentId
      dutyRecordInfoAdd(this.zbForm).then(res => {
        console.log("保存信息返回",res)
        if(res.code == 0){
          this.zbForm.id = res.data;
        }
        this.$message.success("保存成功");
      })
    },
    addMonitoringRecordHandle(){
      this.monitoringRecordOpen = true;
    },
    addShiftChangeRecordHandle(){
      this.shiftChangeRecordOpen = true;
    },
    submitMonitoringRecord(){
      if(! this.monitoringRecordForm.time){
        return this.$message.error("时间为必填项");
      }
      this.$refs["monitoringRecordForm"].validate(valid => {
        if (valid) {
          this.monitoringRecordForm.contentId = this.contentId
          if(this.monitoringRecordForm.id){
            // 更新
            updateDutyRecordMonitoring(this.monitoringRecordForm).then(res => {
              this.$message.success("舆情信息修改成功");
              this.monitoringRecordOpen = false
              this.resetMonitoringRecordForm();
              this.getRecordMonitoringList();
            })
          }else {
            dutyRecordMonitoringAdd(this.monitoringRecordForm).then(resp=>{
              console.log("添加舆情信息",resp)
              this.$message.success("舆情信息添加成功");
              if(resp.code == 0){
                this.monitoringRecordOpen = false
                this.resetMonitoringRecordForm();
                this.getRecordMonitoringList();
              }
            })
          }


        }
      })
    },
    submitShiftChangeRecord(){

      if(! this.shiftChangeRecordForm.time){
        return this.$message.error("时间为必填项");
      }
      this.$refs["shiftChangeRecordForm"].validate(valid => {
        if (valid) {
          this.shiftChangeRecordForm.contentId = this.contentId
          if(this.shiftChangeRecordForm.id){
            // 更新
            updateDutyRecordShiftChange(this.shiftChangeRecordForm).then(res => {
              this.$message.success("值班调班修改成功");
              this.shiftChangeRecordOpen = false
              this.resetShiftChangeRecordForm();
              this.getRecordShiftChangeList();
            })
          }else {
            dutyRecordShiftChangeAdd(this.shiftChangeRecordForm).then(resp=>{
              console.log("添加值班调班记录",resp)
              this.$message.success("值班调班添加成功");
              if(resp.code == 0){
                this.shiftChangeRecordOpen = false
                this.resetShiftChangeRecordForm();
                this.getRecordShiftChangeList();
              }
            })
          }

        }
      })
    },
    cancelMonitoringRecord(){
      this.monitoringRecordOpen = false;
      this.resetMonitoringRecordForm();
    },
    cancelShiftChangeRecord(){
      this.shiftChangeRecordOpen = false;
      this.resetShiftChangeRecordForm();
    },
    resetMonitoringRecordForm(){
      this.monitoringRecordForm = {
        time: '',
        eventSummary: '',
        disposalMinutes: ''
      }
    },
    resetShiftChangeRecordForm(){
      this.shiftChangeRecordForm = {
        time: '',
        originalDutyName: '',
        changeDutyName: '',
        tiban: '',
        tiaoban: '',
        remark: '',
      }
    },
    submit(){},
    cancel(){

    },
    handleSelectionChange(){}
  }
}
</script>
<style scoped>@import "~@/assets/css/adminstyle.css";</style>
